import React from 'react'
import { render } from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import './index.css'
// action
const ADD_TODO = 'ADD_TODO';
const DEL_TODO = 'DEL_TODO';

function addTodo(text){
    return　{
        type : ADD_TODO,
        text
    }
}
function delTodo(){
    return {
        type : DEL_TODO
    }
}
// reducer
const inital = {
    todo : [
        "哈哈哈"
    ]
}
function todo(state, action){
	console.log(action)
    switch(action.type){
        case ADD_TODO:{
            let s = Object.assign({},state);
            s.todo = [...s.todo,action.text];
            return s;
            
            let a = Object.assign({},state);
            a.todo.push(action.text);
            return a;   // 失败

            return Object.assign({},state,{
                todo : [
                    ...state.todo,
                    action.text
                ]
            })          // 成功
            return{
                todo : [
                    ...state.todo,
                    action.text
                ]
            }           // 成功
            
            break;
        }
        case DEL_TODO:{
            let s = Object.assign({},state);
            s.todo.pop();
            return s;
            break
        }
        default:
            return state;
    }
}
const all = combineReducers()
// store
const store = createStore(todo,inital);


class Head extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value : ""
        };
        console.log(this.props)
        this.onChange = this.onChange.bind(this);
    }
    onChange(e){
        this.setState({
            value : e.target.value
        })
    }
    render(){
        return (
            <div>
                <form  >
                    <input type="text" value={this.state.value} onChange={this.onChange}/>
                    <span className="btn"
                        onClick={this.props.actions.add.bind(this,this.state.value)}>Add</span>
                    <span className="btn"
                        onClick={this.props.actions.del.bind(this,this.state.value)}>Del</span>
                </form>
            </div>
        )
    }
}
class List extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>
                {
                    this.props.todos.map((e,i)=>
                        <li key={i}>{e}</li>
                    )
                }
            </div>
        )
    }
}
class App extends React.Component{
    constructor(props){
        super(props);
    }
    render(){  
        return(
            <div>
                <Head actions={this.props.actions} />
                <List todos={this.props.todos}/>
            </div>
        )
    }
}

function mapStateToProps(state){
    return {
        todos : state.todo
    }
}
function mapDispatchToProps(dispatch){
    return {
        actions : {
			add: bindActionCreators(addTodo, dispatch),
			//add : (text)=>dispatch(addTodo(text)),
        	del:  ()=>dispatch(delTodo())
		}
    }
}

App = connect(mapStateToProps,mapDispatchToProps)(App);
render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById("root")
)

store.dispatch(addTodo("test"));
